<script setup>
import PeopleMap from '@/components/map/PeopleMap.vue'
import NACollection from './components/NACollection.vue'
import TownshipCollection from './components/TownshipCollection.vue'
import RiskWarning from './components/RiskWarning.vue'
import PositiveStatistics from './components/PositiveStatistics.vue'
import ContiguityData from './components/ContiguityData.vue'
</script>

<template>
  <div class="naTestBox">
    <div class="contentLeft">
      <div class="leftTop">
        <NACollection class="centerLeft" />

        <div class="centerRight">
          <TownshipCollection />

          <div class="centerBottom" id="leaflet-map" ref="mapContainer">
            <PeopleMap
              style="height: 100%"
              :config="{
                modalType: 'naTest',
              }"
            />
          </div>
        </div>
      </div>

      <RiskWarning class="leftBottom" />
    </div>

    <div class="contentRight">
      <PositiveStatistics />

      <ContiguityData class="rightBottom" />
    </div>
  </div>
</template>

<style scoped lang="less">
.naTestBox {
  display: flex;

  .contentLeft {
    flex: 1;

    .leftTop {
      display: flex;

      .centerLeft {
        flex: 1;
      }

      .centerRight {
        margin-left: 16px;
        display: flex;
        flex-direction: column;

        .centerBottom {
          margin-top: 16px;
          width: 756px;
          height: 533px;
          background-image: url('@/assets/naTest/boxbg3.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .leftBottom {
      margin-top: 16px;
    }
  }

  .contentRight {
    margin-left: 16px;

    .rightBottom {
      margin-top: 16px;
    }
  }
}
</style>
